<template>
  <el-dialog :title="title" :visible.sync="show" append-to-body :close-on-click-modal="false" width="1200px">
    <el-table size="small" :data="list">
      <el-table-column label="检查类型" align="center" min-width="80" key="progressChkType">
        <dict-tag slot-scope="{ row }" :options="dict.type.cq_progress_chk_type" :value="row.progressChkType" />
      </el-table-column>
      <el-table-column label="所属部门" prop="showDeptName" show-overflow-tooltip min-width="200" key="showDeptName" />
      <el-table-column label="项目" prop="projectName" show-overflow-tooltip width="150" key="projectName" />
      <el-table-column label="检查标段" prop="section" show-overflow-tooltip width="80" key="section" />
      <el-table-column label="项目(检查口径)" prop="inpectionCaliber" show-overflow-tooltip width="110" key="inpectionCaliber" />
      <el-table-column label="施工单位" prop="constructionName" show-overflow-tooltip min-width="200" key="constructionName" />
      <el-table-column label="检查单位" align="center" min-width="80" key="randomType">
        <dict-tag slot-scope="{ row }" :options="dict.type.cq_random_type" :value="row.randomType" />
      </el-table-column>
      <el-table-column v-for="item in scoreTypeList" :key="item.value" :label="item.label" align="center" min-width="100">
        <div slot-scope="{ row }" class="material-item" :class="row[item.key + 'Level'] | scoreClass(item.key)">
          {{ row | scoreName(item.key, 'level1') }}
        </div>
      </el-table-column>
      <el-table-column label="检查人员" align="center" show-overflow-tooltip min-width="100" prop="principalUserName" />
      <el-table-column label="检查时间" align="center" prop="checkDate" width="100" />
      <el-table-column label="锁定状态" align="center" width="70">
        <el-tag slot-scope="{ row }" size="small" :type="row.isEnable ? 'primary' : 'info'">{{ row.isEnable ? '锁定' : '未锁' }}</el-tag>
      </el-table-column>
    </el-table>
    <div slot="footer">
      <el-button type="primary" @click="onConfirm">继续录入</el-button>
      <el-button @click="show = false">取消录入</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 相似数据确认
import { inspectTypeListWithKey } from '@/utils/baseData'

// 移除 '管理动作'
const inspectTypeList = JSON.parse(JSON.stringify(inspectTypeListWithKey))
inspectTypeList.map(item =>
  item.scoreTypeList.map((i, index) => {
    if (i.key === 'gldz') item.scoreTypeList.splice(index, 1)
  })
)

export default {
  props: { processType: String },
  dicts: ['cq_random_type', 'cq_progress_chk_type'],
  filters: {
    scoreClass(val, scoreType) {
      if (!val) return ''
      if (scoreType === 'fsl') {
        if (val === 'A') return 'blue'
        if (val === 'B' || val === 'C') return 'red'
        return ''
      }
      if (val === 'A' || val >= 90) return 'green'
      if (val === 'B' || (val < 90 && val >= 80)) return 'blue'
      if (val === 'C' || val < 80) return 'red'
      return ''
    },
    scoreName(item = {}, key, isLevel1) {
      // 一级大类才显示等级
      const level = isLevel1 ? item[`${key}Level`] || '' : ''
      const score = item[`${key}Score`] || ''
      const val = level ? `${level}${score ? `(${score})` : ''}` : score
      return val || '/'
    }
  },
  data() {
    return { show: false, info: {}, list: [] }
  },
  computed: {
    title() {
      return `当前已有${this.list.length}条相似的成绩，是否要继续录入该成绩？`
    },
    scoreTypeList() {
      const { processType } = this
      if (!processType) return []
      const item = inspectTypeList.find(i => i.processType === processType)
      return item?.scoreTypeList || []
    }
  },
  methods: {
    open(data = {}) {
      this.show = true
      this.info = data

      // 处理列表数据
      const list = data.duplicateList || []
      const deptName = i => [i.deptName1, i.deptName2, i.deptName3].filter(i => i).join(' - ')
      list.map(i => (i.showDeptName = deptName(i)))
      this.list = list
    },
    onConfirm() {
      this.show = false
      this.$emit('confirm')
    }
  }
}
</script>
<style lang="scss" scoped>
.material-item {
  display: inline-block;
  text-align: center;
  padding: 2px 10px;
  color: #909399;
  border: 1px currentColor dashed;
  border-radius: 4px;
  vertical-align: top;
}
.green {
  color: #67c23a;
}
.blue {
  color: #409eff;
}
.red {
  color: #f56c6c;
}
</style>
